<template>
  <div id="cityWastehistogram"></div>
</template>
<script setup>
import * as echarts from "echarts";
import resize from "../../../../mixin/resize.js";
import ZhengZhouMap from "@/assets/map/zhengzhoumap.json";
let myChart = shallowRef();
let props = defineProps(["areaData"]);
let value = ref("20");
onMounted(() => {
  myChart.value = echarts.init(document.getElementById("cityWastehistogram"));
  resize(myChart.value);
  getServerData();
});
watch(
  () => props.areaData,
  () => {
    value.value = props.areaData;
    console.log(props.areaData);
  },
  { deep: true }
);
let option = {
  tooltip: {
    trigger: "item",
    formatter: function (params) {
      if (!params.name || params.name == "") {
        return;
      }
      if (value.value[params.dataIndex]) {
        var toolTiphtml = params.name + ":<br>" + value.value[params.dataIndex].wasteNum + "吨";
        return toolTiphtml;
      } else {
        var toolTiphtml = params.name + ":<br>" + "0吨";
        return toolTiphtml;
      }
      console.log(params, "自己大颖的");
    },
  },
  series: [
    {
      name: "郑州地图",
      type: "map",
      map: "ZhengZhouMap", // 这个是上面注册时的名字哦，ZhengZhouMap（'这个名字保持一致'）
      label: {
        show: true,
        textStyle: {
          color: "#000",
        },
      },
      itemStyle: {
        normal: {
          areaColor: "#CFDDE8", //更改地图各个区域的颜色背景
          borderColor: "#fff", //更改地图各个区域之间边框的颜色
        },
        emphasis: {
          areaColor: "#2E72C7", //更改鼠标选中区域地图上的颜色
        },
      },

      select: {
        // 地图选中区域样式
        label: {
          // 选中区域的label(文字)样式
          color: "#000000",
        },
        itemStyle: {
          // 选中区域的默认样式
          areaColor: "#1B3871",
        },
      },
      // data: data || [],
    },
  ],
};
echarts.registerMap("ZhengZhouMap", ZhengZhouMap);
let getServerData = () => {
  myChart.value.setOption(option);
  myChart.value.on("click", function (params) {
    console.log(params);
  });
};
</script>
<style lang="scss" scoped>
#cityWastehistogram {
  width: 480px;
  height: 350px;
}
</style>
